<template>
  <Row :gutter="16">
    <Col :span="8">
      <GrowCard :loading="loading" :overviewData="overviewData" />
    </Col>
    <Col :span="16">
      <Card title="资产状态分布" :loading="loading">
        <AssetStatus :overviewData="overviewData" />
      </Card>
    </Col>

    <Col style="margin-top: 16px" :span="24">
      <Card title="资产类型分布" :loading="loading">
        <AssetCategory :overviewData="overviewData" />
      </Card>
    </Col>
  </Row>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import { Card, Row, Col } from 'ant-design-vue';
  import AssetStatus from './components/AssetStatus.vue';
  import AssetCategory from './components/AssetCategory.vue';
  import { getOverviewStatistics } from './api';

  // import VisitSource from '../components/VisitSource.vue';
  // import VisitRadar from '../components/VisitRadar.vue';
  // import SalesProductPie from '../components/SalesProductPie.vue';
  const overviewData = ref<any>({});
  getOverviewStatistics().then((res) => {
    console.log(res);
    overviewData.value = res;

    loading.value = false;
  });
  const loading = ref(true);
</script>
<style scoped>
  .ant-row {
    padding: 16px;
  }
  .ant-card-loading {
    :deep(.ant-card-body) {
      height: 333px !important;
    }
  }
</style>
